[Day3] ＭVVM 架構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 3

0

Modern Web

少年學Vue，如隙中窺月系列第 3 篇

[Day3] ＭVVM 架構

12th鐵人賽 vue.js

2020-09-17 16:22:34

2357 瀏覽

分享至

雖然 Vue.js 有自己介紹它不是採用ＭVVM 的框架，但 MVVM 的概念卻影響 Vue.js 的運作，因此讓我們先了解什麼是ＭVVM 架構。

架構示意圖

View

代表顯示在畫面的樣子，像是按鈕、文字輸入欄位等等

Model

主要取用資料的部分

ViewModel

將資料和畫面綁定的連結器

實際例子

透過下面例子，就可了解 Vue 資料與畫面雙向綁定還有ＭVVM 架構

View

input 輸入視窗
input 輸入視窗內的資料顯示
當我們修改 input 輸入視窗值，資料 text 值也會改變

Model

data 物件中的 text
當我們用 Vue 開發者工具修改資料 text 值，input 輸入視窗值也會改變

ViewModel

宣告ㄧ個變數 vm Vue 物件，將這個物件與畫面 div 綁定來作為資料與畫面的綁定器。

[Day2] 第一個 Vue 應用程式

[Day4] 資料與畫面綁定的方法

系列文

少年學Vue，如隙中窺月共 30 篇

目錄

RSS系列文訂閱系列文

16 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22206 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙